<template>
	<div class="x-data-select">
		<div class="el-input el-input-group el-input-group--append">
			<div class="el-input__inner" @click="formInput">
				<el-tag @close="handleClose(index)" v-for="(tag ,index) in tags" :key="index" closable :type="tag.type">
					{{tag.name}}
				</el-tag>
			</div>
			<div class="el-input-group__append" @click="formInput">
				<el-button type="primary" icon="el-icon-search">{{title}}</el-button>
			</div>
		</div>
		<el-dialog :title="title" width="70%" v-el-drag-dialog top="5vh" :visible.sync="dialogFormVisible">
			<el-container>
				<el-main>
					<div v-loading="dataLoading" class="xtable-select">
						<x-table ref="xTable" :isSelect="true" @afterTableLoad="afterTableLoad" @rowSelect="rowSelect" :isDateSelect="true"></x-table>
					</div>
				</el-main>
				<el-aside width="200px">
					<div class="select-data">
						<div class="select-data-top">
							<i class="el-icon-folder-add"></i>
							<div class="select-data-title">已选择</div>
						</div>
						<div class="select-data-name" v-for="(item, index) in tags" :key="index">{{item.name}}</div>
					</div>
				</el-aside>
			</el-container>
			<span slot="footer" class="dialog-footer">
				<div class="selectText">{{ selectText }}</div>
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确定选择</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import elDragDialog from '@/service/directives/el-dragDialog'
	import ala from 'ala'
	export default {
		directives: {
			elDragDialog
		},
		model: {
			event: 'change',
			type: {},
			prop: 'dataModel'
		},
		name: 'x-data-select',
		props: {
			type: {
				type: String,
				required: true
			}, //  数据源类型,
			tag: {
				type: String
			}, // 有数据时,在select显示的文字,比如选择为会员admin ，则表单上显示admin
			field: {
				type: String,
				default: 'name'
			}, // 表单选中的字段名称，默认为name
			title: {
				type: String,
				default: '选择数据'
			},
			dataModel: {}
		},
		data() {
			return {
				viewModel: [],
				tags: [], // 已选的数据
				dialogFormVisible: false,
				selectText: '请选择数据',
				dataLoading: false
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				if (this.dataModel) {
					this.viewModel = this.dataModel
				}
				if (!this.tag) {
					return
				}
				var tages = this.tag.split(',')

				tages.forEach(item => {
					if (item !== '') {
						var tagePro = item.split('____')
						var item = {
							name: tagePro[0],
							type: '',
							id: tagePro[1]
						}
						this.tags.push(item)
					}
				})

				if (!this.type) {
					this.$ala.alert('请设置控件的数据源')
				}
			},
			rowSelect(data) {
				var dataItem = this.tags.find(r => Number(r.id) === Number(data.id))
				if (!dataItem) {
					this.getQuery(data)
				}
			},
			getQuery(data) {
				this.selectText = '当前选择：' + data[this.field]
				this.setTag(data)
				this.viewModel.push(data.id)
			},
			setTag(data) {
				if (data) {
					var item = {
						name: data[this.field],
						type: '',
						id: data.id
					}
					this.tags.push(item)
				}
			},
			handleClose(index) {
				this.tags.splice(index, 1)
				this.viewModel = []
				var this_ = this
				this.tags.forEach((res) => {
					this_.viewModel.push(res.id)
				})
			},
			afterTableLoad() {
				this.dataLoading = false
			},
			formInput() {
				this.dataLoading = true
				this.dialogFormVisible = true
				this.$nextTick(() => {
					if (this.$refs.xTable) {
						this.$refs.xTable.init(this.type)
					}
				})
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					this.$emit('change', this.viewModel)
				}
			}
		}
	}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
	.x-data-select {
		.el-input-group__append {
			width: 150px;
		}

		.cuopoin {
			cursor: pointer;
			text-align: center;
		}

		.text-placeholder {
			color: #c0c4cc;
		}

		.el-container {
			border-bottom: 1px solid #e5e5e5;
		}

		.select-data-top {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e5e5e5;
			color: #716aca;

			.el-icon-folder-add {
				font-size: 16px;
			}
		}

		.select-data {
			overflow: scroll;
			max-height: 50vh;
			height: 100%;
			padding: 10px 20px;

			.select-data-title {
				font-size: 16px;
				line-height: 30px;
				margin-left: 5px;
			}

			.select-data-name {
				display: block;
				padding: 8px 5px;
				cursor: pointer;
				border-bottom: 1px dashed #e5e5e5;
				margin-top: 5px;
			}

			.select-data-name:hover {
				color: #716aca;
			}
		}

		.xtable-select {
			max-height: 50vh;
			height: 100%;
		}

		.xtable-select::-webkit-scrollbar {
			width: 5px;
			height: 40px;
		}

		.xtable-select::-webkit-scrollbar-thumb {
			width: 5px;
			background-color: #dcdfe6;
			border-radius: 10px;
		}

		.el-dialog__footer {
			border-top: 1px solid #eaeefb;
		}

		.selectText {
			font-size: 16px;
			font-weight: bold;
			color: #716aca;
			float: left;
		}
	}
</style>
<style lang="scss">
	.x-data-select {
		.xtable-select {
			.el-tabs__nav {
				margin-top: 0;
			}
		}
	}
</style>